<template>
    <div>
      <li>
<!--        <div :class="[data.id==0 ? 'root': '', 'reply']">{{ data.name }}</div>-->
        <a :href="'/leave/?id='+data.id">{{data.name}}</a>
        <ul v-if="data.childlist && data.childlist.length>0">
          <Reply v-for="child in data.childlist" :key="child.id" :data="child"/>
        </ul>
      </li>

<!--      <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">-->
<!--        <a-tree-node key="0-0" title="parent 0">-->
<!--          <a-tree-node key="0-0-0" title="leaf 0-0" is-leaf />-->
<!--          <a-tree-node key="0-0-1" title="leaf 0-1" is-leaf />-->
<!--        </a-tree-node>-->
<!--        <a-tree-node key="0-1" title="parent 1">-->
<!--          <a-tree-node key="0-1-0" title="leaf 1-0" is-leaf />-->
<!--          <a-tree-node key="0-1-1" title="leaf 1-1" is-leaf />-->
<!--        </a-tree-node>-->
<!--      </a-directory-tree>-->

    </div>
</template>

<script>
export default {
  name: "Reply",
  props:['data'],
  data(){
    return{

    }
  },

  methods:{
    onSelect(keys, event) {
      console.log('Trigger Select', keys, event);
    },
    onExpand() {
      console.log('Trigger Expand');
    },
  }

}
</script>

<style scoped>
.reply {
  padding-left: 4px;
  border-left: 1px solid #eee;
}

ul {
  padding-left: 20px;
  list-style: none;
}
.root { display: none; }
</style>
